<template>
  <div class="component-panel">
    <h3>表单组件</h3>
    <div class="components-list">
      <div
        v-for="element in formElements"
        :key="element.type"
        class="component-item"
        draggable="true"
        @dragstart="handleDragStart($event, element)"
      >
        <el-icon class="component-icon">
          <component :is="element.icon" />
        </el-icon>
        <span class="component-label">{{ element.label }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { formElements } from '../utils/formElements.js'

export default {
  name: 'ComponentPanel',
  setup() {
    const handleDragStart = (event, element) => {
      event.dataTransfer.setData('text/plain', JSON.stringify(element))
    }

    return {
      formElements,
      handleDragStart,
    }
  },
}
</script>

<style scoped>
.component-panel h3 {
  margin-bottom: 16px;
  color: #303133;
}

.components-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.component-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: grab;
  transition: all 0.3s;
}

.component-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.component-icon {
  font-size: 24px;
  color: #409eff;
  margin-bottom: 8px;
}

.component-label {
  font-size: 12px;
  color: #606266;
}
</style>
